<template>
  <div class="editor-view">
    <Toolbar @play="onPlay" @stop="onStop" @save="onSave" @open="onOpen" @undo="onUndo" @redo="onRedo" @new="onNew" @exportPdf="onExportPdf" @exportImage="onExportImage" />
    <div class="editor-main">
      <SymbolPanel class="editor-symbols" @update:symbol="onSymbolUpdate" @update:chord="onChordUpdate" />
      <ScoreEditor ref="scoreEditor" class="editor-score" :zoom="zoom" :currentSymbol="currentSymbol" :currentChord="currentChord" :enableEdit="true" />
    </div>
    <div class="editor-footer">
      <!-- <div class="zoom-label">缩放：</div>
      <el-select v-model="zoom" size="mini" class="zoom-select" style="width: 80px;">
        <el-option v-for="item in zoomOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <span class="zoom-percent">{{ zoom }}%</span> -->
    </div>
  </div>
</template>

<script>
import Toolbar from '@/components/Toolbar.vue'
import ScoreEditor from '@/components/ScoreEditor.vue'
import SymbolPanel from '@/components/SymbolPanel.vue'
import html2canvas from 'html2canvas'
import { jsPDF } from 'jspdf'

export default {
  name: 'EditorView',
  components: {
    Toolbar,
    ScoreEditor,
    SymbolPanel
  },
  data() {
    return {
      zoom: 100,
      zoomOptions: [
        { label: '50%', value: 50 },
        { label: '75%', value: 75 },
        { label: '100%', value: 100 },
        { label: '125%', value: 125 },
        { label: '150%', value: 150 },
        { label: '200%', value: 200 }
      ],
      currentSymbol: {
        duration: '四分音符',
        pitch: '小字组'
      },
      currentChord: null
    }
  },
  methods: {
    onPlay() {
      this.$refs.scoreEditor?.$refs.jianpuEditor?.playScore?.();
    },
    onStop() {
      this.$refs.scoreEditor?.$refs.jianpuEditor?.stopScore?.();
    },
    onSave() {
      this.$refs.scoreEditor?.$refs.jianpuEditor?.saveScore?.();
    },
    onOpen() {
      this.$refs.scoreEditor?.$refs.jianpuEditor?.openScore?.();
    },
    onUndo() {
      this.$refs.scoreEditor?.$refs.jianpuEditor?.undo?.();
    },
    onRedo() {
      this.$refs.scoreEditor?.$refs.jianpuEditor?.redo?.();
    },
    onNew() {
      this.$router.push({ path: '/create' });
    },
    onSymbolUpdate(symbol) {
      this.currentSymbol = { ...this.currentSymbol, ...symbol }
    },
    onChordUpdate(chord) {
      this.currentChord = chord;
    },
    async onExportPdf() {
      try {
        // 获取要导出的元素
        const element = this.$refs.scoreEditor.$el;
        
        // 使用html2canvas将元素转换为canvas
        const canvas = await html2canvas(element, {
          scale: 2, // 提高清晰度
          useCORS: true, // 允许跨域图片
          logging: false, // 关闭日志
          backgroundColor: '#ffffff' // 设置白色背景
        });

        // 创建PDF文档
        const pdf = new jsPDF({
          orientation: 'portrait',
          unit: 'mm',
          format: 'a4'
        });

        // 计算图片在PDF中的尺寸，保持宽高比
        const imgWidth = 210; // A4纸的宽度
        const imgHeight = (canvas.height * imgWidth) / canvas.width;

        // 将canvas添加到PDF
        pdf.addImage(canvas.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, imgWidth, imgHeight);

        // 保存PDF
        pdf.save('score.pdf');
      } catch (error) {
        console.error('Export PDF failed:', error);
        this.$message.error('导出PDF失败，请重试');
      }
    },
    async onExportImage() {
      try {
        // 获取要导出的元素
        const element = this.$refs.scoreEditor.$el;
        
        // 使用html2canvas将元素转换为canvas
        const canvas = await html2canvas(element, {
          scale: 2, // 提高清晰度
          useCORS: true, // 允许跨域图片
          logging: false, // 关闭日志
          backgroundColor: '#ffffff' // 设置白色背景
        });

        // 创建下载链接
        const link = document.createElement('a');
        link.download = 'score.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
      } catch (error) {
        console.error('Export image failed:', error);
        this.$message.error('导出图片失败，请重试');
      }
    }
  }
}
</script>

<style scoped>
.editor-view {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--background-color);
}

.editor-main {
  display: flex;
  overflow: hidden;
  height: calc(100vh - 60px - 48px); /* 60px toolbar, 48px footer */
  padding: 16px;
  gap: 16px;
}

.editor-footer {
  height: 48px;
  background: var(--surface-color);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-top: 1px solid var(--border-color);
  position: sticky;
  bottom: 0;
  z-index: 10;
  justify-content: flex-end;
}

.zoom-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: 8px;
}

.zoom-select {
  margin-right: 8px;
}

.zoom-percent {
  font-size: 13px;
  color: var(--text-primary);
  margin-left: 4px;
}

.editor-symbols {
  width: 300px;
  background: var(--surface-color);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.editor-score {
  flex: 1;
  background: var(--surface-color);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .editor-symbols {
    width: 280px;
  }
}

@media (max-width: 768px) {
  .editor-main {
    flex-direction: column;
    height: auto;
  }
  
  .editor-symbols {
    width: 100%;
    margin: 0;
  }
  
  .editor-score {
    margin: 16px 0 0 0;
  }
}
</style> 